

    <template>
    <template v-for="(item,index) in lists" :key="item.id">
        <!-- 还有子项 -->
        <el-submenu v-if="item.lists" :index="''+index">
            <template #title>
                <i v-if="item.icon" :class="item.icon"></i>
                <span>{{ item.title }}</span>
            </template>
            <!-- 回调自己 -->
            <menuChild :lists="item.lists"></menuChild>
        </el-submenu>
        <!-- 项 -->
        <el-menu-item v-else :index="item.value">
            <i v-if="item.icon" :class="item.icon"></i>
            <template #title>{{ item.title }}</template>
        </el-menu-item>
    </template>
</template>
<script lang="ts">
import { ref, reactive, defineComponent, computed } from 'vue'
import { useRoute } from "vue-router"
export default defineComponent({
    name: 'menuChild',
    props: {
        lists: {
            type: Array,
            default: () => []
        }
    },
    setup: (props: any, { attrs, slots, emit }) => {

        return {}
    }
})
</script>

<style lang="less">
</style>
